@charset "utf-8";
@import "../quote/color";

/**
 ** 主题按钮颜色样式
 **/
.btn-a,.btn-b,.btn-d,.btn-e,.com-btn-a,.btn-file{
  position: relative;
  a{color:@cf;}
  display: inline-block;
  min-width: 85px;
  height: 30px;
  padding:0 10px;
  border-radius: 5px;
  color: @cf;
  &:hover{opacity: .8;}
}
.btn-a{
  background: @main-b;
}
.btn-b{
  background:@main-a;
}
.btn-c{
  padding:2px 10px;
  height: 36px;
  border-radius: 5px;
  color: @cf;
  &:hover{opacity: .8;}
  background: @main-e;
}
.btn-d{
  color:@main-a;
  border:.5px solid @cdb;
  background: repeating-linear-gradient(@cf,@cf2);
  letter-spacing: 1px;
}
.btn-e{
  background: @main-c;
}

//优惠券禁用&&编辑
.btn-a1,.btn-a2{
  position: relative;
  padding:4px 8px;
  border-radius: 4px;
  color: @cf;
  &:hover{opacity: .8;}
}
.btn-a1{
  background: @main-e;
}
.btn-a2{
  background: @main-b;
}

.btn-file{
  line-height: 30px;
  text-align: center;
  background:@main-a;
  cursor: pointer;
}


/**
 ** 图片大小/头像主样式
 **/
.head-a{
  display: block;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  text-align: center;
  line-height: 70px;
  color: #fff;
  letter-spacing: 1px;
  font-size: 16px;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

/**
 ** icon
 **/

.search-a,.search-b{
  height:32px;
  padding:0 10px;
  border:1px solid @cdb;
  border-radius: 5px;
  i{font-size: 20px;color:@c9;cursor: pointer;}
}
.search-a{
  input{
    width: calc(100% - 28px);height:90%;
  }
}
.search-b{
  min-width: 240px;
  input{
    width: calc(100% - 48px);
    margin-left: 10px;
    height: 90%;
    float: left;
  }
}

.icon-a{
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid @main-b;
  border-radius: 2px;
  cursor: pointer;
  box-shadow:0 1px 1px rgba(0,0,0,.10);
  &:before{
    position: absolute;
    content:'';
    width: 70%;
    height:1px;
    left:15%;
    top:6px;
    background-color:@main-b;
  }
  &:after{
    position: absolute;
    content:'';
    height: 70%;
    width:1px;
    left:6px;
    top:15%;
    background-color:@main-b;
    opacity:1;
    transition:opacity .3s;
  }
}
.active .icon-a{
  &:after{
    opacity:0;
  }
}

.icon-b{
  display: inline-block;
  width: 45px;
  height: 22px;
  background-color:@main-e;
  color: @cf;
  border-radius: 3px;
}
.icon-b-active{background-color:@main-b;}



/**
 ** 外部组件样式强制覆盖
 **/

//date
.date-box{
  text-align: center;overflow: hidden;
  .c-datepicker-date-editor{width:100%;padding:0 10px;}
  .c-datepicker-data-input.only-date{width: 40%;}
}
.icon-fanhui1{
  margin-right: 10px;
  font-size: 20px !important;
  color:@c9;
  cursor:pointer;
}

.com-prompt{
  .prompt-main{
    font-family:sans-serif;
  }
}

/*
 * component
 */
.layer-box{
  /*display: none;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(3,3,3,.5);
  z-index:10;*/
  .box-close{
    position: absolute;
    right: 10px;
    top: -5px;
    font-size: 25px;
    color:@c9;
    cursor: pointer;
  }
  .staff-box{
    .box-title{
      margin-bottom: 20px;
      color:@main-a;
    }
    position: absolute;
    left:50%;
    top:50%;
    width:400px;
    padding:20px 20px 50px;
    transform: translate(-50%,-50%);
    background: @cf;
    border-radius: 5px;
  }
}


.form-input{
  display:inline-block;
  width:100%;

  min-height:32px;
  padding:0 5px;
  border: 1px solid @cc;
  border-radius: 4px;

  /*line-height: 1.42857143;*/
  background-color: @cf;
  background-image: none;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  &:focus{
    border: 1px solid @main-b;
    box-shadow: 0 0 1px 1px rgba(32,160,255,.075);
  }
}
.form-group-w1,.form-group-w2,.form-group-w3{
  display: inline-block;
  vertical-align: middle;
}
.form-group-a{
  width: 100px;
}
.form-group-b{
  width: 200px;
}
.form-group-c{
  width: 300px;
}
.form-group-d{
  width: 400px;
}
.form-group-w5{
  width: 50%;
}
.form-group-w7{
  width: 70%;
}

.form-content{
  position: relative;
}

.select-c1{
  display: inline-block;
  min-width:250px;
  border:1px solid @cdb;
  padding-left: 10px;
  min-height: 32px;
  &:focus{
    border:1px solid @main-b;
  }
  transition: all .2s;
  border-radius: 5px;
}

//textarea
textarea{
  width:100%;
  padding:10px;
  min-height:60px;
  border: 1px solid @cdb;
  border-radius: 4px;
  outline: none;
  font-family: 'Mukta','PT Sans', sans-serif;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  &:focus{
    border: 1px solid @main-b;
    box-shadow: 0 0 1px 1px rgba(32,160,255,.075);
  }
}

//form(星号必填项)
.must{
  &:after{
    content: "*";
    color:red;
    position: absolute;
    left: -10px;
    top: 0%;
  }
}
//form(校验警告样式)
label.error{
  display: block;
  //position: absolute;
  margin-top: 2px;
  font-size:12px;
  color:red;
}



//按钮动画
/**
 **动画send
 **/
.send-animate{
  position:relative;
  display: none;
  //vertical-align: middle;
  //对应的文字
  //&+span{vertical-align: middle;}
  //动画图标
  .send-main{
    display: inline-block;
    position: relative;
    height: 16px;
    width: 16px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 100%;
    animation: send-animate 1s infinite linear;
    &:after{
      position: absolute;
      content:'';
      width:0px;
      height:0px;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 4px solid #fff;
      transform:rotate(-140deg);
      top:-2px;
      left:-1px;
    }
  }
}

//选中的状态
.active-animate{
  cursor: not-allowed;
  opacity:0.4 !important;
  .send-animate{
    position: absolute;
    display: inline-block;
    top:50%;
    transform: translateY(-45%);
  }
  .send-text{
    margin-left: 20px;
  }
}
@keyframes send-animate{
  100% {
    transform:rotate(360deg);
  }
}


//seller
@keyframes seller-animate {
  50% {
    transform:scale(0.9);
  }
  100% {
    transform:scale(1);
  }
}




//波浪加载
.load{
  display: inline-block;
  font-size: 0;
}

.load-list{
  display: inline-block;
  width: 3px;
  height:20px;
  animation-fill-mode: both;
  border-radius:25%;
  background-color: #999;
  margin-left: 1px;
}

.load > .load-list:nth-child(1) {
  animation: loadAnimate 1s infinite ease-in-out;
}
.load > .load-list:nth-child(2) {
  animation: loadAnimate 1s 0.4s infinite ease-in-out;
}
.load > .load-list:nth-child(3) {
  animation: loadAnimate 1s 0.2s infinite ease-in-out;
}
.load > .load-list:nth-child(4) {
  animation: loadAnimate 1s 0.6s infinite ease-in-out;
}
@keyframes loadAnimate{
  50% {
    transform:scaleY(0.5)
  }
  100% {
    transform:scaleY(1)
  }
}





